<template>
  <div class="app-container">
    <eForm ref="form"/>
    <!--工具栏-->
    <div class="head-container">
      <el-row :gutter="15">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" size="medium" label-width="200px">

          <el-col :span="8">
            <el-form-item label="id">
              <el-input label="id" v-model="dataForm.id" clearable placeholder="id" style="width: 200px;"
                        class="filter-item"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="databaseHost">
              <el-input label="databaseHost" v-model="dataForm.databaseHost" clearable placeholder="databaseHost"
                        style="width: 200px;"
                        class="filter-item"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="databasePort">
              <el-input label="databasePort" v-model="dataForm.databasePort" clearable placeholder="databasePort"
                        style="width: 200px;"
                        class="filter-item"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="databaseName">
              <el-input label="databaseName" v-model="dataForm.databaseName" clearable placeholder="databaseName"
                        style="width: 200px;"
                        class="filter-item"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="databaseUserName">
              <el-input label="databaseUserName" v-model="dataForm.databaseUserName" clearable
                        placeholder="databaseUserName" style="width: 200px;"
                        class="filter-item"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="databasePassword">
              <el-input label="databasePassword" v-model="dataForm.databasePassword" clearable
                        placeholder="databasePassword" style="width: 200px;"
                        class="filter-item"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <div style="float:right">
              <el-form-item>
                <el-button @click="getDataList()" class="filter-item" size="mini" type="success" icon="el-icon-search">
                  查询
                </el-button>
                <el-button v-if="this.checkPermission(['admin','efficiencyTools:targetDatabaseConfig:save'])"
                           type="primary"
                           class="filter-item" size="mini"
                           @click="addOrUpdateHandle()">新增
                </el-button>
                <el-button v-if="this.checkPermission(['admin','efficiencyTools:targetDatabaseConfig:delete'])"
                           type="danger"
                           class="filter-item" size="mini"
                           @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除
                </el-button>
                <el-button v-if="this.checkPermission(['admin','efficiencyTools:targetDatabaseConfig:download'])"
                           type="primary"
                           class="filter-item" size="mini"
                           @click="downloadFile()">下载
                </el-button>
                <el-button v-if="this.checkPermission(['admin','efficiencyTools:targetDatabaseConfig:importData'])"
                           type="primary"
                           class="filter-item" size="mini"
                           @click="importDataFromFile()">从excel导入
                </el-button>
              </el-form-item>
            </div>
          </el-col>
        </el-form>
      </el-row>
    </div>


    <el-table :data="data" v-loading="loading" ref="table" size="small" @selection-change="selectionChangeHandle"
              style="width: 100%;">

      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="id" label="id">
      </el-table-column>
      <el-table-column prop="databaseHost" label="databaseHost">
      </el-table-column>
      <el-table-column prop="databasePort" label="databasePort">
      </el-table-column>
      <el-table-column prop="databaseName" label="databaseName">
      </el-table-column>
      <el-table-column prop="databaseUserName" label="databaseUserName">
      </el-table-column>
      <el-table-column prop="databasePassword" label="databasePassword">
      </el-table-column>
      <el-table-column
        v-if="this.checkPermission(['admin','efficiencyTools:targetDatabaseConfig:delete','efficiencyTools:targetDatabaseConfig:update'])"
        fixed="right" width="150px" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" v-permission="['admin','efficiencyTools:targetDatabaseConfig:update']" size="mini"
                     @click="addOrUpdateHandle(scope.row.id)">
            修改
          </el-button>
          <el-button type="primary" v-permission="['admin','efficiencyTools:targetDatabaseConfig:delete']" size="mini"
                     @click="deleteHandle(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>

    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
    import checkPermission from '@/utils/permission'
    import initData from '@/mixins/initData'
    import {parseTime} from '@/utils/index'
    import {downloadFileFunction} from '@/api/downloadFile'
    import AddOrUpdate from './targetDatabaseConfigAddOrUpdate'
    import {
        queryTargetDatabaseConfigListByConditionMap2,
        downloadDataToExcel,
        deleteTargetDatabaseConfigByIntegerIdList
    } from '@/api/TargetDatabaseConfig.js'
    import eForm from './TargetDatabaseConfigImportDataFromFile'

    export default {
        name: 'TargetDatabaseConfig',
        components: {AddOrUpdate, eForm},
        mixins: [initData],
        data() {
            return {
                dataForm: {
                    id: '',
                    databaseHost: '',
                    databasePort: '',
                    databaseName: '',
                    databaseUserName: '',
                    databasePassword: ''
                },
                dataListLoading: false,
                dataListSelections: [],
                addOrUpdateVisible: false,
                exportDataLoading: false,
            }
        },
        created() {
            this.$nextTick(() => {
                this.init()
            })
        },
        methods: {
            parseTime,
            checkPermission,
            beforeInit() {
                this.url = 'api/efficiencyTools/targetDatabaseConfig/queryTargetDatabaseConfigListByConditionMap2';
                const sort = 'sort,asc';
                this.params = {page: this.page, pageSize: this.size, sort: sort};
                this.getParam();
                return true
            },
            importDataFromFile() {
                this.$refs.form.dialog = true;
            },
            downloadFile() {
                let outputFileName = `TargetDatabaseConfigList查询导出结果.xlsx`;
                this.getParam();
                downloadDataToExcel(this.params).then(res => {
                    this.exportDataLoading = false;
                    downloadFileFunction(res, outputFileName);
                    this.init();
                    this.$notify({
                        title: '下载成功',
                        type: 'success',
                        duration: 2500
                    })
                }).catch(err => {
                    this.exportDataLoading = false;
                    console.log(err.response.data.message)
                })
            },
            selectionChangeHandle(val) {
                this.dataListSelections = val;
            },
            getParam() {
                const sort = 'sort,asc';
                this.params = {page: this.page, pageSize: this.size, sort: sort};
                const query = this.dataForm;
                const id = query.id;
                if (id) {
                    this.params['id'] = id;
                }
                const databaseHost = query.databaseHost;
                if (databaseHost) {
                    this.params['databaseHost'] = databaseHost;
                }
                const databasePort = query.databasePort;
                if (databasePort) {
                    this.params['databasePort'] = databasePort;
                }
                const databaseName = query.databaseName;
                if (databaseName) {
                    this.params['databaseName'] = databaseName;
                }
                const databaseUserName = query.databaseUserName;
                if (databaseUserName) {
                    this.params['databaseUserName'] = databaseUserName;
                }
                const databasePassword = query.databasePassword;
                if (databasePassword) {
                    this.params['databasePassword'] = databasePassword;
                }
            },
            getDataList() {
                this.getParam();
                this.page = 0;
                this.params['page'] = this.page;
                queryTargetDatabaseConfigListByConditionMap2(this.params).then(res => {
                    this.data = res.content;
                    this.total = res.totalElements;
                }).catch(() => {
                    this.loading = false;
                })
            },
            addOrUpdateHandle(id) {
                this.addOrUpdateVisible = true;
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id);
                })
            },
            // 删除
            deleteHandle(id) {
                let ids = id ? [id] : this.dataListSelections.map(item => {
                    return item.id;
                });
                const idList = [];
                for (let i = 0; i < ids.length; i++) {
                    idList.push(ids[i]);
                }
                let params = {
                    'idList': idList.toString()
                };
                this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteTargetDatabaseConfigByIntegerIdList(params).then(res => {
                        if (res.hasError) {
                            this.$notify({
                                title: res.error.message,
                                type: 'fail',
                                duration: 2500
                            })
                        } else {
                            this.$notify({
                                title: res.data,
                                type: 'success',
                                duration: 2500
                            })

                        }
                        this.getDataList();
                    }).catch(err => {
                        this.loading = false;
                        console.log(err.response.data.message);
                    })
                })
            }
        }
    }
</script>

